/**
 * tab--一级、二级、三级
 * by swl
 * create 2021-10-11
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styles from './style.less';
import { Tabs } from 'antd';

const { TabPane } = Tabs;
class TabC extends Component {
  // 默认值
  static defaultProps = {
    type: 'editable-card', // 可选editable-card--一级、 secondTab--二级、threeTab--三级  类型
    activeKey: '', // 当前激活 tab 面板的 key
    tabSource: [], // [{title,key,content}]
    onChange: () => {},
    onEdit: () => {}, // 新增和删除页签的回调，在 "editable-card" 时有效
    tabBarExtraContent: undefined, // tab bar 上额外的元素
    tabBarGutter: undefined, // tabs 之间的间隙
    tabBarStyle: undefined, // tab bar 的样式对象
    forceRender: false, // TabPane--被隐藏时是否渲染 DOM 结构
    closable: false, // TabPane--是否显示关闭按钮
    bottomHeight: true, // 是否显示tab标题栏底部margin-bottom，默认显示。当一级嵌套二层时，一级margin-bottom不显示
  };

  constructor(props) {
    super(props);
    this.state = {
      styleType: 'line',
    };
  }

  componentDidMount() {
    if (this.props.type) {
      this.setState({
        styleType: this.props.type == 'secondTab' ? 'line' : 'editable-card',
      });
    }
  }

  componentWillUnmount() {}

  onChange = (tabType) => {
    this.setState({ tabType });
    this.props.onChange(tabType);
  };

  onEdit = (tabType) => {
    this.setState({ tabType });
    this.props.onEdit(tabType);
  };

  render() {
    const { type, activeKey, tabBarGutter, tabBarStyle, forceRender, tabSource, closable, tabBarExtraContent, bottomHeight } = this.props;
    const { styleType } = this.state;
    return (
      <div className={`${type == 'threeTab' ? styles.tabBox : type == 'secondTab' ? styles.tabLine : styles.tabClass} ${bottomHeight ? '' : styles.tabBottom}`}>
        <Tabs
          onChange={this.onChange}
          activeKey={activeKey}
          type={styleType}
          tabBarGutter={tabBarGutter}
          tabBarStyle={tabBarStyle}
          // forceRender={forceRender}
          hideAdd={true}
          tabBarExtraContent={tabBarExtraContent}
          onEdit={this.onEdit}
        >
          {tabSource.map((item) => (
            <TabPane tab={item.title} key={item.key} forceRender={forceRender} closable={closable}>
              {item.content}
            </TabPane>
          ))}
        </Tabs>
        {/* </div> */}
      </div>
    );
  }
}
// props默认值
TabC.propsTypes = {
  tabSource: PropTypes.array,
  type: PropTypes.string, // 可选editable-card--一级、 secondTab--二级、threeTab--三级  类型
  activeKey: PropTypes.string, // 当前活动页key值
  onChange: PropTypes.func,
  onEdit: PropTypes.func, // 新增和删除页签的回调，在"editable-card" 时有效
  tabBarExtraContent: PropTypes.node, // tab bar 上额外的元素
  tabBarGutter: PropTypes.number, // tabs 之间的间隙
  tabBarStyle: PropTypes.object, // tab bar 的样式对象
  forceRender: PropTypes.bool, // 被隐藏时是否渲染 DOM 结构
  closable: PropTypes.bool, // 是否显示关闭按钮
  tabSource: PropTypes.array, // [{title,key,content}]
  bottomHeight: PropTypes.bool, // 是否显示tab标题栏底部margin-bottom，默认显示。当一级嵌套二层时，一级margin-bottom不显示
};

export default TabC;
